<template>
	<view class="gold_detail_box">
		<view class="gold_detail_top_bg">
			<text class="interest_rate_value">367.70</text>
			<view class="day_annualized_rate">最新金价(元/克)</view>
			<view class="thousands_of_income_box">
				<view class="left_thousands_of_income">
					<text class="big_text">-0.72</text>
					<text class="small_text">今日涨跌幅(%)</text>
				</view>
				<view class="left_thousands_of_income">
					<text class="big_text">500</text>
					<text class="small_text">起购价格</text>
				</view>
			</view>
		</view>
		<view class="gold_detail_middle_box">
			<view class="first_title_view">
				<text class="title_big_text">金价走势</text>
				<i class="cuIcon-right"></i>
			</view>
			<view class="tubiao_box">
				<view class="charts-box">
					<qiun-data-charts type="gold" :chartData="chartData" background="none" :ontap="false"
						:uchartsH5="true" :uchartsApp="true" :onmouse="false" />
				</view>
				<view class="tab_text_box">
					<text class="model_tab_text">分时</text>
					<text class="model_tab_text active_text">近一月</text>
					<text class="model_tab_text">近半年</text>
					<text class="model_tab_text">近一年</text>
				</view>
			</view>

			<view class="tui-box">
				<view class="tui-cell-header">
					<view class="tui-cell-title">安全保障</view>
				</view>
				<view class="tui-order-list">
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="../../static/gold/jigou.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">知名金融机构</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="../../static/gold/chanpin.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">精选优质产品</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="../../static/gold/jianguan.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">监管机构备注</view>
					</view>
					<view class="tui-mess-text">
						本产品为民生银行推出的积存金产品,通过民生银行电子账户进行交易,
						黄金价格实时波动。产品风险等级为中等,不低谊最低收益,投资风险由投资人本人承担
					</view>
				</view>

			</view>

			<view class="tab_Information">
				<text @tap="changeTab(1)" class="tb_Information_txt" :class="{active_show:currentTab==1}">交易规则</text>
				<text @tap="changeTab(2)" class="tb_Information_txt" :class="{active_show:currentTab==2}">信息披露</text>
				<text @tap="changeTab(3)" class="tb_Information_txt" :class="{active_show:currentTab==3}">常见问题</text>
			</view>

			<view v-if="currentTab==1" class="Basic_Information_box">
				<view class="base_text_box">
					<view class="model_base_text">
						<text class="qian_text" style="font-size: 30upx;">购买与领取</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">购买金额</text>
						<text class="bold_text">500元起购,且为1元的整数倍</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">年龄范围</text>
						<text class="bold_text">18岁及以上</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">领取金额</text>
						<text class="bold_text">1克领取:剩余持有克数不足1克时，需全部领取</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">资金到账</text>
						<text class="bold_text">资金预计1小时内回到原购买银行卡</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">交易时间</text>
						<text class="bold_text beyond_text">
							周一9点~周六凌晨4点开放交易（法定节假日盾民生银行公告的体市除外),实时成交:交易时间内黄金价格实时变动,购买领取结果全以民生银行为准
						</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">兑换实金</text>
						<text class="bold_text beyond_text">持有满5克及以上,可预约前往指定民生银行网点兑换实物黄金</text>
					</view>
				</view>

				<view class="base_text_box">
					<view class="model_base_text">
						<text class="qian_text" style="font-size: 30upx;">收益与费用</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">生息规则</text>
						<text class="bold_text beyond_text">
							每日按持有克数的年化0.2%计算"黄金利息”。累积满0.0001克后发放至黄金账户;15点前购买成功，当日开始生息
						</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">费用规则</text>
						<text class="bold_text beyond_text">
							1)购买无手续费。
							2)领取时,按成交金额的0.3%收取手续费,单笔最低0.01元。
							3)兑换实物黄金需按兑换的黄金克数支付手续费，具体费用以民生银行现场确认为准。
						</text>
					</view>
				</view>
			</view>

			<view v-if="currentTab==2" class="Basic_Information_box">
				<view class="base_text_box">
					<view class="model_base_text">
						<text class="qian_text" style="font-size: 30upx;">基本信息</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">产品名称</text>
						<text class="bold_text">生积存金</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">发行机构</text>
						<text class="bold_text">中国民生银行股份有限公司</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">黄金价格</text>
						<text class="bold_text beyond_text">由民生银行参考金交所Au99.99及境外价格提供商综合报价</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">风险等级</text>
						<text class="bold_text">中等</text>
					</view>
				</view>
				<view class="base_text_box">
					<view class="model_base_text">
						<text class="qian_text" style="font-size: 30upx;">查看协议</text>
					</view>
					<view class="model_base_text protocol">
						<text class="bold_text">《客服协议》</text>
						<i class="cuIcon-right"></i>
					</view>
					<view class="model_base_text protocol">
						<text class="bold_text">《账户管理协议》</text>
						<i class="cuIcon-right"></i>
					</view>
					<view class="model_base_text protocol">
						<text class="bold_text">《民生银行跨行通协议》</text>
						<i class="cuIcon-right"></i>
					</view>
					<view class="model_base_text protocol">
						<text class="bold_text">《个人征收声明》</text>
						<i class="cuIcon-right"></i>
					</view>
					<view class="model_base_text protocol">
						<text class="bold_text">《账户即时通协议》</text>
						<i class="cuIcon-right"></i>
					</view>
				</view>
			</view>

			<view v-if="currentTab==3" class="common_problem_box">
				<view class="btn_box">
					<view class="btn">什么是黄金定投?</view>
				</view>
				<view class="text">
					黄金定投是指按照客户约定的扣款周期和扣款日，从指定的扣款渠道，扣除指定金额，买入指定黄金产品的一种投资方式；
				</view>
			</view>

		</view>
		<view class="detail_footer_box">
			<view class="go_pay_btn">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 1,
				chartData: {
					"categories": [
						"01-28",
						"02-08",
						"02-18",
						"02-28",
						"03-08",
						"03-18"
					],
					"series": [{
							"name": "成交量A",
							"data": [
								359.15,
								375.23,
								372.11,
								390.10,
								365.63,
								378.60,
								380.56
							]
						}

					]
				},
				chartDataRing: {
					"series": [{
						"data": [{
								"name": "债券",
								"value": 77.62
							},
							{
								"name": "现金",
								"value": 1.79
							},
							{
								"name": "股票",
								"value": 17.88
							}

						]
					}]
				},
				tooltipCustom: {
					x: 10,
					y: 10,
					index: 2,
					textList: [{
						text: "自定义文字",
						color: "#EE6666"
					}]
				}
			}
		},
		methods: {
			changeTab(num) {
				this.currentTab = num;
			}
		}
	}
</script>

<style lang="scss">
	.gold_detail_box {
		width: 750upx;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url('../../static/gold/bg.png');
		background-color: #F8F8F8;
		overflow: scroll;
		padding-bottom: 100upx;

		.gold_detail_top_bg {
			height: 330upx;
			font-size: 0upx;
			box-sizing: border-box;
			padding-top: 50upx;
			text-align: center;

			.interest_rate_value {
				color: white;
				font-size: 60upx;
				font-weight: bold;
				line-height: 40upx;
			}

			.day_annualized_rate {
				color: #ffffff;
				font-size: 24upx;
				margin-top: 30upx;
			}

			.thousands_of_income_box {
				display: flex;
				justify-content: space-around;
				margin-top: 40upx;

				.left_thousands_of_income {
					display: flex;
					flex-direction: column;

					.big_text {
						font-size: 40upx;
						font-weight: bold;
						color: white;
					}

					.small_text {
						font-size: 24upx;
						color: #ffffff;
					}
				}
			}
		}

		.gold_detail_middle_box {
			border-radius: 40upx;
			background-color: #F8F8F8;
			padding-top: 45upx;
			padding-left: 25upx;
			padding-right: 25upx;
			box-sizing: border-box;

			.first_title_view {
				height: 25upx;
				box-sizing: border-box;
				border-left: 7upx solid $uni-global-color-theme;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32upx;
				font-weight: 550;
				padding-left: 13upx;

				.next_image {
					width: 40upx;
					height: 40upx;
				}
			}

			.tubiao_box {
				margin-top: 35upx;
				height: 550upx;
				background-color: white;
				border-radius: 10upx;

				.charts-box {
					height: 430upx;
				}

				.tab_text_box {
					width: 620upx;
					height: 50upx;
					margin-top: 40upx;
					border: 1px solid #f3f3f3;
					border-right: none;
					margin: 40upx auto;
					display: flex;

					.model_tab_text {
						width: 155upx;
						height: 50upx;
						line-height: 50upx;
						text-align: center;
						color: #aeaeae;
						font-size: 30upx;
						border-right: 1upx solid #f3f3f3;
					}

					.active_text {
						color: white;
						background-color: $uni-global-color-theme;
					}
				}

			}

			.tui-box {
				padding-top: 30upx;

				.tui-cell-header {
					height: 40upx;
					padding: 0 10upx;
					box-sizing: border-box;
					border-left: 5px solid #3476f1;

					.tui-cell-title {
						font-size: 32upx;
						line-height: 40upx;
						font-weight: 550;
						color: #333333;
					}

					.tui-cell-sub {
						font-size: 26upx;
						font-weight: 400;
						color: #999;
						padding-right: 28upx;
					}
				}

				.tui-order-list {
					margin: 30upx auto;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-around;
					background-color: white;
					border-radius: 20rpx;

					.tui-tool-item {
						width: 25vw;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						padding: 30upx 0 30upx 0;

						.tui-icon-box {
							.tui-tool-icon {
								width: 94upx;
								height: 94upx;
								display: block;
							}

							.tui-badge-icon {
								width: 66upx;
								height: 30upx;
								position: absolute;
								right: 0;
								transform: translateX(88%);
								top: -15upx;
							}

						}

						.tui-tool-text {
							font-size: 24upx;
							font-weight: 400;
							color: #666666;
							padding-top: 30upx;
						}
					}

					.tui-mess-text {
						padding: 20upx 40upx 20upx 40upx;
						border-top: 1upx solid #fbfbfb;
						line-height: 40upx;
						font-size: 24upx;
						color: #999999;
					}
				}


			}

			.tab_Information {
				margin-top: 30upx;
				height: 60upx;
				font-size: 30upx;
				color: #aeaeae;

				.tb_Information_txt {
					margin-right: 60upx;
				}

				.active_show {
					font-size: 35upx;
					font-weight: bold;
					color: $uni-global-color-theme;
					position: relative;

					&::after {
						content: "";
						display: inline-block;
						position: absolute;
						border-radius: 5upx;
						width: 50upx;
						height: 10upx;
						background-color: $uni-global-color-theme;
						bottom: -25upx;
						left: 50%;
						margin-left: -25upx;
					}
				}
			}

			.Basic_Information_box {
				margin-top: 30upx;

				.base_text_box {
					border-radius: 20upx;
					background-color: white;
					box-sizing: border-box;
					padding-left: 34upx;
					padding-right: 34upx;
					margin-bottom: 40upx;

					.model_base_text:last-child {
						border-bottom: none;
					}

					.model_base_text {
						line-height: 80upx;
						border-bottom: 1upx solid #f7f7f7;
						box-sizing: border-box;
						position: relative;
						display: flex;

						.qian_text {
							font-size: 25upx;
							color: #aeaeae;
							margin-right: 40upx;
							white-space: nowrap;
						}

						.bold_text {
							font-size: 25upx;
							color: #333333;
						}

						.beyond_text {
							line-height: 55upx;
						}
					}
					
					.protocol{
						justify-content: space-between;
					}
				}
			}

			.common_problem_box {
				background-color: white;
				border-radius: 20upx;
				margin: 35upx 0 40upx 0;
				box-sizing: border-box;
				padding: 0 25upx 25upx;

				.btn_box {
					height: 150upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn {
						padding: 0 20upx 0;
						background-color: $uni-global-color-theme;
						color: white;
						font-size: 28upx;
						line-height: 85upx;
						text-align: center;
						border-radius: 15upx;
					}
				}

				.text {
					box-sizing: border-box;
					padding: 30upx;
					border-radius: 20upx;
					font-size: 28upx;
					border: 1upx solid #f5f5f5;
					color: #999999;
					line-height: 50upx;
				}
			}






			.detail_footer_text {
				margin-top: 35upx;
				font-size: 22upx;
				color: #848484;
				padding-bottom: 40upx;

				.txt {
					line-height: 35upx;
				}
			}

		}

		.detail_footer_box {
			position: fixed;
			bottom: 0upx;
			height: 100upx;
			width: 750upx;
			background-color: white;
			z-index: 3;
			display: flex;

			.go_pay_btn {
				flex-grow: 1;
				height: 100upx;
				line-height: 100upx;
				text-align: center;
				background-color: $uni-global-color-theme;
				color: white;
				font-size: 35upx;
			}
		}

	}
</style>
